<template>
  <el-container class="container">
    <el-header class="header">
      <el-row style="z-index:1;pointer-events:none;">
        <el-col :span="8">
          <img
            :src="titleimg"
            style="width:100px;height:100px;"
          />
        </el-col>
        <el-col :span="8">
          <everyday class="titletxt" :text="headtxt"></everyday>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside">
        <el-menu
          :default-active="localActivemenu"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :collapse="isCollapse"
          :router="true"
        >
          <el-submenu v-for="(item,index) in dirdata" :index="item.index" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">{{item.title}}</span>
            </template>
            <el-menu-item
              v-for="(subitem,subindex) in item.subdata"
              :key="subindex"
              :index="subitem.index"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">{{subitem.title}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item :to="{ path: '/center' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/menuhome/info' }">用户权限</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <router-view></router-view>
      </el-main>
    </el-container>
    <dayimg></dayimg>  
  </el-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import webtitle from "../components/webtitle.vue";
import * as config from '../configsetting';
import {checktoken,tget} from '../request';
export default {
  data() {
    return {
      titleimg: config.NodeHost+"/uploads/bearhead-small.png",
      headtxt: "Vue English Word 管理系统",
      dirdata: [
        {
          index: "1",
          title: "单词和词根",
          subdata: [
            {
              index: "/menuhome/enword",
              title: "单词列表"
            },
            {
              index: "/menuhome/etyma",
              title: "词根列表"
            },
            {
              index: "1-3",
              title: "用戶備注"
            }
          ]
        },
        {
          index: 2,
          title: "系統管理"
        }
      ]
    };
  },
  computed: {
    localActivemenu() {
      //let index = window.localStorage.getItem("activemenu");
      //return index ? index : "/menuhome/enword";
      return "/menuhome/enword";
    },
    ...mapState("app", ["activemenu"]),
    ...mapState("user",["everyday"])
  },
  beforeRouteEnter (to, from, next) {
    // 检查token
    console.log('----------------first-----------------------');
    next(vm=>{
      checktoken(vm);
    });
  },
  methods: {
    handleSelect(index, indexPath) {
      console.log(index);
      console.log(indexPath);
      this.setActivemenu(index);
    },
    ...mapActions("app", ["setActivemenu"])
  },
  watch:{
    '$route':function(a,b,c){
      console.log(a);
      console.log(b);
      console.log(c);
    }
  }
};
</script>
<style scoped>
.container {
  height: 100%;
}
.header {
  background-color: #b3c0d1;
  line-height: 200px;
  height: 90px !important;
}
.aside {
  background-color: white;
}
.main {
  background-color: #e9eef3;
  height: 100%;
}
.titletxt {
  font-size: 20px;
  color: #636a70;
  letter-spacing: 0px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
</style>